<template>
  <el-container class="diy-main">
    <!--左侧边栏-->
    <el-aside class="diy-sidebar">
      <div class="diy-sidebar-left">
        <div
          v-for="(item, idx) in leftbar"
          :key="idx"
          class="diy-sidebar-item"
          :style="item.id === nowIdx ? 'color:#fff': '' "
          @click="setcolor(idx)"
        >
          <div>
            <svg-icon :icon-class="item.id === nowIdx ? item.iconcheck:item.iconuncheck" />
          </div>
          <div>{{item.text}}</div>
        </div>
      </div>
      <div class="diy-left-main" v-if="nowIdx == 0">
        <div class="diy-left-mainbt">
          <span>容器样式</span>
        </div>
        <!--容器样式-->
        <div class="diy-comlist">
          <Container group-name="drag" behaviour="copy" :get-child-payload="getChildPayload1">
            <div v-for="item in phoneIcon" :key="item.type" @click="setBackground(item.type)">
              <div class="diy-comlist-item">
                <div>
                  <svg-icon :icon-class="item.icon" />
                </div>
                <div>{{item.text}}</div>
              </div>
            </div>
          </Container>
        </div>
        <div class="diy-left-mainbt">
          <span>常用组件</span>
        </div>
        <!--组件列表-->
        <div class="diy-comlist">
          <Container group-name="drag" behaviour="copy" :get-child-payload="getChildPayload1">
            <div v-for="item in comlist" :key="item.id" @click="dianji(item)">
              <div class="diy-comlist-item">
                <div>
                  <svg-icon :icon-class="item.icon" />
                </div>
                <div>{{item.text}}</div>
              </div>
            </div>
          </Container>
        </div>
        <!-- 营销组件 -->
        <div class="diy-left-mainbt">
          <span>营销组件</span>
        </div>
        <div class="diy-comlist">
          <Container group-name="drag" behaviour="copy" :get-child-payload="getChildPayload1">
            <div v-for="item in marketing" :key="item.id" @click="dianji(item)">
              <div class="diy-comlist-item">
                <div>
                  <svg-icon :icon-class="item.icon" />
                </div>
                <div>{{item.text}}</div>
              </div>
            </div>
          </Container>
        </div>
        <!-- 店铺组件  -->
        <div class="diy-left-mainbt">
          <span>店铺组件</span>
        </div>
        <div class="diy-comlist">
          <Container group-name="drag" behaviour="copy" :get-child-payload="getChildPayload1">
            <div v-for="item in shop" :key="item.id" @click="dianji(item)">
              <div class="diy-comlist-item">
                <div>
                  <svg-icon :icon-class="item.icon" />
                </div>
                <div>{{item.text}}</div>
              </div>
            </div>
          </Container>
        </div>
        <!-- 团购组件  -->
        <div class="diy-left-mainbt">
          <span>团购组件</span>
        </div>
        <div class="diy-comlist">
          <Container group-name="drag" behaviour="copy" :get-child-payload="getChildPayload1">
            <div v-for="item in groupBuy" :key="item.type" @click="dianji(item)">
              <div class="diy-comlist-item">
                <div>
                  <svg-icon :icon-class="item.icon" />
                </div>
                <div>{{item.text}}</div>
              </div>
            </div>
          </Container>
        </div>
      </div>

      <div class="diy-left-main" v-if="nowIdx == 1">
        <div class="diy-left-mainbt" @click="sortname = true">
          <i style="color:#409eff" class="el-icon-circle-plus-outline"></i>
          <span>添加分组</span>
        </div>
        <!--分组-->
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item :name="item.id" v-for="(item, idx) in groupData" :key="idx">
            <template slot="title">
              <div class="grouping-bt">{{item.name}}</div>
              <svg-icon class="grouping-icon" icon-class="set_zu"></svg-icon>
              <svg-icon
                class="grouping-icon"
                icon-class="shan_chu"
                @click.stop="delGroupingCon(item.id)"
              ></svg-icon>
            </template>
            <div
              :class="pageIdx === child.id ?  'active':'pagelist'"
              v-for="(child, idxs) in item.page_list"
              @click="activePage(child.id)"
              :key="idxs"
            >
              <div>{{child.name}}</div>
              <div class="iconHome" v-if="child.is_first">
                <svg-icon icon-class="setHome"></svg-icon>
              </div>
              <div>
                <el-popover
                  placement="bottom"
                  width="150"
                  trigger="hover"
                  title="保存后扫码查看"
                  >
                  <!-- 二维码 -->
                  <p>{{config.value}}</p>
                  <vue-qr :text="config.value" :size="124" :logoSrc="config.logoSrc" :logoScale="0.2"></vue-qr>
                  <svg-icon slot="reference" class="grouping-icon" icon-class="linkEwm" @mouseenter="showEwm(idx, idxs)"></svg-icon>
                </el-popover>
                <svg-icon class="grouping-icon" icon-class="set_zu"></svg-icon>
                <svg-icon
                  v-if="child.is_first == 0"
                  @click="delNowPage(item.id,child.id)"
                  class="grouping-icon"
                  icon-class="shan_chu"
                ></svg-icon>
              </div>
            </div>
          </el-collapse-item>
          <div class="addbtn" v-if="addPageBtnStatus" @click="addPageStatus = true">
            <span>添加页面</span>
          </div>
        </el-collapse>
        <!--页面管理内容-->
        <div class="set-group-con" v-if="addPageStatus||addstatus||sortname">
          <el-form ref="form" :model="proupform" label-width="80px">
            <div v-if="!sortname||addPageStatus">
              <el-form-item label="页面类型">
                <el-radio-group v-model="proupform.sort">
                  <el-radio label="普通页面"></el-radio>
                  <el-radio label="外页面"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="页面名称">
                <el-input v-model="proupform.name"></el-input>
              </el-form-item>
              <el-form-item label="网址信息" v-if="proupform.sort == '外页面'">
                <el-input v-model="proupform.urlinfo"></el-input>
              </el-form-item>
              <el-form-item label="选择分组" v-if="proupform.sort == '普通页面'">
                <el-select v-model="proupform.sortlist" placeholder="分组">
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="(item, idx) in groupData"
                    :key="idx + 'A'"
                  >{{item.name}}</el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item style="margin-top:10px" v-if="sortname&&!addPageStatus" label="分组名称">
              <el-input style="width:82%;" v-model="proupform.groupname"></el-input>
            </el-form-item>
            <div class="group-btn-con">
              <div class="group-btn-item" @click="addPageStatus = false, sortname = false">
                <span>取消</span>
              </div>
              <div class="group-btn-item" @click="addGroup">
                <span>确定</span>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </el-aside>
    <el-main class="diy-center">
      <!--手机容器-->
      <div class="diy-phone-con">
        <div class="diy-phone" :style="{background:setBack,opacity:setBackOpcity}">
          <div
            group-name="drag"
            @drop="onDrop('NewAll', $event)"
            :get-child-payload="getChildPayload2"
            style="flex-direction: column;"
            :auto-scroll-enabled="true"
            :should-accept-drop="checkPhoneCon"
            class="box"
          >
            <template v-for="(item, idxchild) in NewAll">
              <div
                class="jquery-drag"
                :key="idxchild + 'A'"
                :data-id="item.id"
                :data-type="item.type"
                style="position:relative;width:100%"
              >
                <component
                  class="coms"
                  :is="item.type"
                  :comObj="item.data"
                  :childCon="item.child"
                  :nowComIdx="idxchild"
                  @setComData="setComData"
                  @click.right.native="showRightMenu()"
                  @click.native="setRightCon(item.type, item.id)"
                  @updataNowPageJSON="updataNowPageJSON"
                ></component>
                <span class="upup commonality" :data-id="idxchild+1" @click.stop="upward(item.id, $event)"></span>
                <span class="downward commonality" :data-id="idxchild+1" @click.stop="downward(item.id, $event)"></span>
                <span class="deletes el-icon-delete commonality" :data-id="idxchild+1" @click.stop="deletes(item, item.id, $event)"></span>
              </div>
            </template>
          </div>
        </div>
        <!-- 底部导航 -->
        <DiyTabar @click.native="setTar" style></DiyTabar>
      </div>
    </el-main>

    <!--右侧边栏-->
    <el-aside class="div-config">
      <div class="diy-right-mainbt">
        <el-tabs v-model="rightIdx" @tab-click="rightBar">
          <el-tab-pane :label="diyconfigbt" name="1">
            <component :is="setDiyCon" @updataNowPageJSON="updataNowPageJSON" :nowComIdx="nowComIdx" @changeBg="changeBg"></component>
          </el-tab-pane>
          <!-- <el-tab-pane label="背景样式" name="2">
            <component :is="setDiyCon" @updataNowPageJSON="updataNowPageJSON" :nowComIdx="nowComIdx" @changeBg="changeBg"></component>
          </el-tab-pane> -->
          <!-- <el-tab-pane label="模板市场" name="2"></el-tab-pane> -->
        </el-tabs>
      </div>
    </el-aside>
  </el-container>
</template>
<script src="./indexcon.js"></script>
<style lang="css">
.iconHome {
  position: absolute;
  left: -17px;
}
.ui-state-highlight {
  min-height: 50px;
  line-height: 0.6em;
  background: rgb(140, 197, 255);
}
.commonality {
  background-size: cover;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: move;
  z-index: 99;
}
.downward {
  background-image: url(../../../assets/config_images/downdown.png);
  right: 45px;
  display: none;
}
.upup {
  background-image: url(../../../assets/config_images/upup.png);
  right: 85px;
  display: none;
}
.deletes {
  right: 5px;
  display: none;
  color: #8c9199;
  font-size: 22px;
  text-align: center;
  line-height: 30px;
}
/* .move {
  background: url(../../../assets/config_images/movearrow.png);
  background-size: cover;
  display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: move;
} */
.coms {
  height: 100%;
  width: 100%;
  position: relative;
  border: 1px dashed transparent;
  margin-bottom: 1px;
  /* background: #fff; */
}
.coms::before {
  /* width: 99%;
  position: absolute;
  display: block;
  content: "";
  border: 1px dashed #dfdfdf; */
}
.coms:hover {
  border: 1px dashed #8c8c8c;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
}
.list-group-item i {
  cursor: pointer;
}
.diy-phone {
  position: relative;
  overflow-y: auto;
  background-size: cover !important;
  background-position: center !important;
}
.tarbarfixd {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ebeef5;
}
.tarbarfixd > ul {
  padding: 0;
  margin: 0;
  height: 50px;
}
.tarbarfixd > ul > li {
  width: 33.33%;
  height: 50px;
  display: inline-block;
  float: left;
  padding: 32px 0 5px 0;
  background-image: url(../../../assets/config_images/home.png);
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 5px;
  background-size: 20%;
}
.tarbarfixd > ul > li {
  font-size: 12px;
  text-align: center;
}
</style>

<style>
.jquery-drag:hover .upup,.jquery-drag:hover .downward, .jquery-drag:hover .deletes{
  display: block;
}
.el-popover__title {
  text-align: center;
}
</style>
